{% extends 'myadmin/base.html' %}

{% block content %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            菜品管理
            <small>订餐系统后台管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">菜品信息管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h2 class="box-title"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>编辑菜品信息</h2>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form class="form-horizontal" action="{% url 'myadmin_product_update' product.id %}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="oldpicname" value="{{ product.cover_pic }}"/>
                        {% csrf_token %}
                        <div class="box-body">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">店铺名称：</label>
                                <div class="col-sm-4">
                                    <select name="shop_id" id="shop_id" onchange="doLoadCategory(0)" class="form-control select2" style="width: 100%;">
                                        {% for svo in shoplist %}
                                            <option value="{{ svo.id }}" {% if svo.id == product.shop_id %} selected {% endif %}>{{ svo.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">菜品分类：</label>
                                <div class="col-sm-4">
                                    <select name="category_id" id="category_id" class="form-control select2" style="width: 100%;">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">菜品名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" name="name" value="{{ product.name }}" class="form-control" id="inputText3"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">单价：</label>
                                <div class="col-sm-4">
                                    <input type="text" name="price" value="{{ product.price }}" class="form-control" id="inputText3"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">菜品图片：</label>
                                <div class="col-sm-4">
                                    <input type="file" name="cover_pic"/><br/>
                                    <img src="/static/uploads/product/{{ product.cover_pic }}" width="200"/>
                                </div>
                            </div>

                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary">保存</button> &nbsp;
                                <button type="reset" class="btn btn-default">重置</button>
                                <div class="col-sm-offset-2 col-sm-10">
                                </div>
                            </div>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>
                <!-- /.box -->
            </div>
        </div>

    </section>
    <!-- /.content -->
{% endblock %}
{% block js %}
    <script type="text/javascript">

        //自定义函数，实现通过店铺id，Ajax加载对应的菜品分类信息
        function doLoadCategory(cid) {
            //获取选中的id号
            var id = $("#shop_id").val();
            $("#category_id").empty();
            $.ajax({
                url: "/myadmin/category/load/" + id,
                type: 'get',
                data: {},
                dataType: 'json',
                success: function (res) {
                    if (res.data.length < 1)
                        return;
                    var data = res.data;
                    var select = $("#category_id")
                    for (var i = 0; i < data.length; i++) {
                        $('<option value="' + data[i].id + '">' + data[i].name + '</option>').appendTo(select)
                        //select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                    }
                    select.find("option[value='" + cid + "']").attr("selected", true);

                }
            });

        }

        doLoadCategory({{product.category_id}});
    </script>
{% endblock %}